<template>
	<!--active-->
	<li class="nav-cart" @mouseenter="carShowhandle" @mouseleave="hideShowhandle">
		<a href="javascript:;" class="ball-rect">购物车</a>
		<!--根据class改变颜色-->
		<span class="cart-empty-num" :class="{'cart-num':count>0}">
			<i>{{count}}</i>
		</span>
		<div class="nav-cart-wrapper" v-if="carShow">
			<div class="nav-cart-list">
				<div class="empty" v-if="count<=0">
					<h3>购物车为空</h3>
					<p>您还没有选购任何商品，现在前往商城选购吧!</p>
				</div>
				<div class="full" v-else>
					<div class="nav-cart-items">
						<ul>
							<li class="clear" v-for="(item,index) in carPanelData">
								<div class="cart-item js-cart-item cart-item-sell">
									<div class="cart-item-inner">
										<div class="item-thumb">
											<img :src="item.ali_image+'?x-oss-process=image/resize,w_80/quality,Q_100/format,webp'">
										</div>
										<div class="item-desc">
											<div class="cart-cell">
												<h4> 
													<a href="#/item/100027401">{{item.title}}</a>
												</h4>
												<p class="attrs">
													<span>{{item.spec_json.show_name}}</span>
												</p>
												<h6>
													<span class="price-icon">¥</span>
													<span class="price-num">{{item.price}}</span>
													<span class="item-num">x {{item.count}}</span>
												</h6>
											</div>
										</div>
										<div class="del-btn" @click="delCarPanelData(item.sku_id)">删除</div>
									</div>
								</div>
							</li>
						</ul>
					</div>
					<div class="nav-cart-total">
						<p>共 <strong class="ng-binding">{{count}}</strong> 件商品</p>
						<h5>合计：<span class="price-icon">¥</span><span class="price-num ng-binding" ng-bind="cartMenu.totalPrice">{{totle}}</span></h5>
						<h6>
							<router-link to="/Cart" class="nav-cart-btn">去购物车</router-link>
						</h6>
					</div>
				</div>
			</div>
		</div>
		<!-- 小球 -->
		<transition name="ball"
	      v-on:before-enter="beforeEnter"
	      v-on:enter="enter"
	      v-on:after-enter="afterEnter"
	      v-bind:css="true"
	    >
	        <!-- x 轴 -->
		    <div class="addcart-mask" v-show="ball.show"> 
		        <!-- y轴 -->
		    	<img class="mask-item"></img>
		    </div>
		</transition>
	</li>
</template>

<script type="text/javascript">
export default {
	// 计算属性
	computed:{
        carPanelData(){
        	return this.$store.state.carPanelData
        },
        count(){
        	return this.$store.getters.totleCount
        },
        totle(){
        	return this.$store.getters.totlePrice
        },

        carShow(){
        	return this.$store.state.carShow
        },
        // 控制小球的隐藏与显示
        ball(){
        	return this.$store.state.ball
        }
	},
	methods:{
		//清空购物车

		delCarPanelData (id) {
            this.$store.commit('delCarPanelData',id)
		},
		// 购物车 进入 移除显示的方法
		carShowhandle(){
            this.$store.commit('showCar')
		},
		hideShowhandle(){
            this.$store.commit('hideCar')
		},
		// //商品添加动画效果
		// //初始状态  小球是在加入购物车的地方
		beforeEnter(el){
			//小球的位置
			let rect=this.ball.el.getBoundingClientRect()
			//购物车的位置
			let rectEl=document.getElementsByClassName('ball-rect')[0].getBoundingClientRect()
			//当前小球
			let ball=document.getElementsByClassName('mask-item')[0]		  
			           
			        
			//计算
			let x=(rectEl.left+120)-(rect.left+rect.width/2)
			let y=rect.top+rect.height/2-(rectEl.top+10)
            //设置样式
			el.style.transform='translate3d(0,'+y+'px,0)'  //图片的样式
			ball.style.transform='translate3d(-'+x+'px,0,0)'
			ball.src=this.ball.img
		},
		//运动状态   让小球飞出
		enter(el){
			//重排重绘
			let ballee=document.getElementsByClassName('mask-item')[0]
			let a=el.offsetHeight		
			el.style.transform='translate3d(0,0,0)'
			ballee.style.transform='translate3d(0,0,0)'
			
		},
		//结束状态  到购物车中
		afterEnter(){
            this.ball.show=false
		}

	}
}
</script>
<style type="text/css" scoped="scoped">
.ball-enter-active{
	transition: 1s cubic-bezier(.14,1.21,.93,1.56);
}
.ball-enter-active .mask-item{
	transition: 1s cubic-bezier(0,0,0,0);
}
.addcart-mask{
	position: relative;
}
.addcart-mask img.mask-item{
    position: absolute;
    z-index: 999!important;
	width:80%;
}

</style>